<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>博客园</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: black;
			}

			#top-nav {
				/* margin-top: 15px; */
				margin-left: 40px;
				height: 60px;
				line-height: 60px;
				align-items: center;
				/* border:1px solid red; */
				font-size: 18px;
				display: flex;
			}

			#top-nav .left #nav {
				display: flex;

			}

			#top-nav .left #nav li {
				height: 25px;
				width: 60px;
				line-height: 25px;
				margin-left: 1px;
			}

			#top-nav .left #nav li a {

				color: #6B7474;
			}

			#top-nav .left #nav li#find {
				position: relative;
			}

			#top-nav .left #nav li#find #faxian {
				display: inline-block;
				width: 60px;
				/* border: 1px solid green; */
				background: url(images/pulldown-light.svg) 45px center no-repeat;
			}

			#top-nav .left #nav li ul#found {
				display: none;
				width: 90px;
				background-color: #F9F9F9;
				padding-left: 4px;
				position: absolute;
				z-index: 666;
			}

			#top-nav .left #nav li:hover ul#found {
				display: block;

			}

			#top-nav .left #nav li #found li {
				height: 40px;
				line-height: 40px;

			}

			#top-nav .left #nav li #found li a:hover {
				text-decoration: underline;
			}

			/*右侧*/
			#top-nav #right li {
				height: 25px;
				/* border: 14px solid blue; */
			}

			#top-nav .right .search input {
				outline: none;
				height: 20px;
				font-size: 15px;
			}

			#top-nav .right .search .searchicon {
				padding-top: 5px;
				border-radius: 6px;
			}

			#top-nav .right .search .text {
				line-height: 20px;
				border-radius: 6px;
			}

			#top-nav .right ul#nav {
				display: flex;
				/* border: 5px solid red; */
				align-items: center;
			}

			#top-nav .right ul#nav .search {
				margin-left: 40px;
				background-color: gainsboro;
				border-radius: 6px;
				padding-left: 15px;
				height: 40px;
				line-height: 40px;
				padding-top: 10px;
				box-sizing: border-box;
				/* display: flex;
				align-items: center; */
			}

			#top-nav .right ul#nav .search div {
				height: 40px;
				line-height: 40px;
			}

			#top-nav .right ul#nav .search div form {
				/* margin-top: -5px; */
				display: flex;

			}

			#top-nav .right ul#nav .search div input {
				border: none;
				background-color: gainsboro;
			}

			#top-nav .right ul#nav .link {
				width: 40px;
				padding-left: 20px;
			}

			#top-nav .right ul#nav .link img {
				width: 27px;
				height: 27px;

			}

			#top-adv {
				height: 39px;
			}

			#maincontent {
				display: flex;
			}

			#maincontent>div#left {
				width: 200px;
				height: 600px;
				background-color: #EEEEEE;
			}

			#maincontent>div#left li {
				height: 50px;
				/* border: 1px solid red; */
				text-align: center;
				line-height: 50px;
				box-sizing: border-box;
				font-size: 15px;
			}

			#maincontent>div#left li img {
				padding-right: 20px;
				vertical-align: middle;
			}

			#maincontent>div#left .seprator {
				background-color: red;
				height: 1px;
			}

			#maincontent>div#left #others {
				position: relative;
			}

			#maincontent>div#left ul.more {
				width: 90px;
				display: none;
				background-color: #f9F9F9;
				position: absolute;
				top: 36px;
				left: 100px;
				font-size: 12px;
				box-shadow: 1px 1px 5px lightgray;
			}

			#maincontent>div#left ul.more li {
				height: 40px;

			}

			#maincontent>div#left #others:hover ul.more {
				display: block;
			}

			#maincontent #middle {
				width: 650px;
				/* background-color: blue; */
			}

			#maincontent #middle {
				margin-left: 30px;
			}

			#maincontent #middle .tuijian {}

			#maincontent #middle .tuijian li {
				font-size: 14px;
				line-height: 30px;
				height: 30px;
			}

			#maincontent #middle .tuijian li a {
				color: #0053A1;
				margin-right: 6px;
			}

			#maincontent #middle .tuijian li a:hover {
				color: coral;
				text-decoration: underline;
			}

			#maincontent #middle .aritcle {
				margin: 20px 0;

				border-bottom: 1px dotted lightgray;
			}

			#maincontent #middle .aritcle .content h3 {
				font-size: 16px;
				line-height: 40px;
				height: 40px;
			}

			#maincontent #middle .aritcle .content h3 a {
				text-decoration: underline;
				color: #0053A1;

			}

			#maincontent #middle .aritcle .content p {
				color: #555555;
				font-size: 12px;
			}

			#maincontent #middle .aritcle .author {
				height: 40px;
				line-height: 40px;
			}

			#maincontent #middle .aritcle .author a {
				color: #0053A1;
				font-size: 14px;
			}

			#maincontent #middle .aritcle .author .posttime {
				font-size: 13px;
				margin: 0 8px;
			}

			#maincontent #middle .aritcle .author .b {
				display: inline-block;
				width: 40px;
				padding-left: 20px;
				/* background-color: #0000FF; */
				margin-left: 0px;
			}

			#maincontent #middle .aritcle .author .dig {
				background: url(images/dig-1.png) 0 center no-repeat;
			}

			#maincontent #middle .aritcle .author .dig:hover {
				background-image: url(images/dig-2.png);
				color: #0053A1;
			}

			#maincontent #middle .aritcle .author .comment {
				background: url(images/coment-1.png) 0 center no-repeat;
			}

			#maincontent #middle .aritcle .author .comment:hover {
				background-image: url(images/coment-2.png);
				color: #0053A1;
			}

			#maincontent #middle .aritcle .author .look {
				background: url(images/look-1.png) 0 center no-repeat;
			}

			#maincontent #middle .aritcle .author .look:hover {
				background-image: url(images/look-2.png);
				color: #0053A1;
			}
			#middle #mb .page{
				display: flex;
				flex: row nowrap;
				height: 40px;
				font-size:18px;
				line-height: 40px;
			}
			#middle #mb .page li{
				margin:0 20px;
				padding: 0 15px;
				text-align: center;
				background-color: #F4F4F6;
				
			}
			#middle #mb .page li a{
				color: #959595;
			}
			#middle #mb .page .nowpage{
				background-color: #2F96Fd;
				
			}
			#middle #mb .page .nowpage a{
				color: white;
			}
			.clear:after {
				height: 0;
				content: '';
				clear: both;
				display: block;
			}
			#right{
				background-color: #F9F9F9;
				/* background-color: darkgray; */
				margin-left: 100px;
				width: 350px;
				padding: 15px;
			}
			#right .radv img{
				height: 200px;
				width: 310px;
				/* margin: 15px; */
			}
			#right .radv2{
				height: 30px;
				line-height: 30px;
			}
			#right .radv2 a{
				font-size: 14px;
			}
			#right h3.title{
				height: 60px;
				line-height: 60px;
			}
			#right h3.title  a{
				font-weight: 100;
				font-size:16px;
			}
			#right .article li{
				font-size: 14px; 
				line-height:20px;
				margin-bottom: 10px;
				display: flex;
				
			}
			#right .article li span{
				display: inline-block;
				width: 20px;
				text-align: left;
				height: 100%;
			}
			#right .article li a:hover{
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="top-nav">
			<div class="left">
				<ul id="nav">
					<li style="margin-right:80px;">
						<a href="#"><img src="images/logo.svg" height="35px" width="95px" alt=""> </a>
					</li>
					<li><a href="#">首页</a></li>
					<li><a href="#">新闻</a></li>
					<li><a href="#">博问</a></li>
					<li><a href="#">专区</a></li>
					<li><a href="#">闪存</a></li>
					<li><a href="#">班级</a></li>
					<li><a href="#">怀旧</a></li>
					<li id="find">
						<a href="#" id="faxian">发现</a>
						<ul id="found">
							<li><a href="#">园子</a></li>
							<li><a href="#">小组</a></li>
							<li><a href="#">收藏</a></li>
							<li><a href="#">招聘</a></li>
							<li><a href="#">找找看</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="right">
				<ul id="nav">
					<li class="search">
						<div>
							<form action="#">
								<input type="text" name="wd" class="text" />
								<input class="searchicon" type="image" src="images/search.svg" height="30px"
									width="30px" />
							</form>
						</div>
					</li>
					<li class="link">
						<a href="#"><img src="images/newpost.svg" alt=""></a>
					</li>
					<li class="link"><img src="images/myblog.svg" alt=""></li>
					<li class="link"><img src="images/message.svg" alt=""></li>
					<li class="link"><img src="images/default-avatar.png" alt=""></li>
				</ul>
			</div>
		</div>
		<div id="top-adv"><a href="#"><img src="images/top-aliyun-adv.jpg" height="40px" width="100%" /></a></div>
		<div id="maincontent">
			<div id="left">
				<ul>
					<li class="pick">
						<a href="#"><img src="images/picked.svg" />精华</a>
					</li>
					<li><a href="#"><img src="images/candidate.svg" />候选</a></li>
					<li class="seprator">

					</li>
					<li>
						<a href="#">
							<img src="images/subscription.svg" />订阅
						</a>
					</li>
					<li>
						<a href="#"><img src="images/following.svg" alt="">关注</a>
					</li>
					<li>
						<a href="#"><img src="images/commented.svg" alt="">我评</a>
					</li>
					<li>
						<a href="#"><img src="images/digged.svg" alt="">我赞</a>
					</li>
					<li id="others">
						<a href="#"><img src="images/more.svg" alt="">更多</a>
						<ul class="more">
							<li><a href="#">所有随笔</a></li>
							<li><a href="#">最新评论</a></li>
							<li><a href="#">官方博客</a></li>
							<li><a href="#">博客皮肤</a></li>
						</ul>
					</li>
					<li>
						<a href="#"><img src="images/feedback.svg" height="20px" width="20px" alt="">反馈</a>
					</li>
					<li>
						<a href="#"><img src="images/dark.svg" /></a>
					</li>

				</ul>
			</div>
			<div id="middle">
				<div class="tuijian">
					<ul>
						<li><a href="#">【编辑推荐】一探即将到来的 C# 10(16/30/3394)</a><a href="#">»</a></li>
						<li><a href="#">【最多推荐】小白自制Linux开发板 一. 瞎抄原理图与乱画PCB(19/11/758)</a><a href="#">»</a></li>
						<li><a href="#">【新闻头条】免费商用！华为全新定制字体HarmonyOS Sans上线 鸿蒙OS专属(0/24/1228)</a><a href="#">»</a></li>
						<li><a href="#">【推荐新闻】WWDC2021：iOS领衔四大系统更新 但苹果今年更想跟你聊服务(0/4/987)</a><a href="#">»</a></li>
					</ul>
				</div>
				<div class="aritcle">
					<div class="content">
						<h3><a href="#">Jmeter(五十一) - 从入门到精通高级篇 - jmeter之运动战（详解教程）</a></h3>
						<p class="clear">
							<img src="./images/20190702130839.png" style="float: left;" />
							博主头像1.简介
							运动战是一种军事作战方式，依托较大的作战空间来换取时间移动兵力包围敌方，以优势兵力速战速决，运动战的运用归为这样一段话“避敌主力，诱敌深入，集中优势兵力逐个击破”。今天宏哥也当一回将军，指挥jmeter在
							运动中消灭敌人。好了闲话少说，回归正题，今天主要是讲解和分享：在jmeter运行中来更
							...
						</p>
					</div>
					<div class="author">
						<a href="#">北京-宏哥</a>
						<span class="posttime">2021-06-09 14:35</span>
						<a href="#" class="b dig">1</a>
						<a href="#" class="b comment">2</a>
						<a href="#" class="b look">5</a>
					</div>
				</div>
				<div class="aritcle">
					<div class="content">
						<h3><a href="#">到精通高级篇 - jmeter之运动）</a></h3>
						<p class="clear">
							<img src="./images/20190702130839.png" style="float: left;" />
							博主头像1.简介
							...
						</p>
					</div>
					<div class="author">
						<a href="#">北京-宏哥</a>
						<span class="posttime">2021-06-09 14:35</span>
						<a href="#" class="b dig">1</a>
						<a href="#" class="b comment">2</a>
						<a href="#" class="b look">5</a>
					</div>
				</div>
				<div id="mb">
					<ul class="page">
						<li class="nowpage"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">...</a></li>
						<li><a href="#">200</a></li>
						<li><a href="#">&gt;</a></li>
					</ul>
				</div>
			</div>
			<div id="right">
				<div class="radv">
					<a href="#"><img src="images/2016690-20210603085240237-1523193838.jpg" alt=""></a>
				</div>
				<div class="radv2">
					<a href="#">【推荐】百度智能云年中Hi购季，款款特惠</a>
				</div>
				<div >
					<h3 class="title"><a href="#">48小时阅读排行</a></h3>
					<ul class="article">
						<li><span>1</span><a href="#">可笑！慕课网涉嫌抄袭开源项目至今没有道歉，而且在偷偷的“毁尸灭迹”</a></li>
						<li><span>2</span><a href="#">.NET平台系列21：云原生时代 .NET5 雄霸天下</a></li>
						<li><span>3</span><a href="#">个网络应用安全实操要点，全方位保护 Web 应用的安全</a></li>
						<li><span>4</span><a href="#">啥是全栈程序员？更厉害？更有钱途？</a></li>
						<li><span>5</span><a href="#">我不服！这开源项目居然才888个星！？</a></li>
						<li><span>6</span><a href="#">.NET平台系列18 .NET5的超强优势</a></li>
					</ul>
				</div>
				<div >
					<h3 class="title"><a href="#">10天推荐排行</a></h3>
					<ul class="article">
						<li><span>1</span><a href="#">可笑！慕课网涉嫌抄袭开源项目至今没有道歉，而且在偷偷的“毁尸灭迹”</a></li>
						<li><span>2</span><a href="#">.NET平台系列21：云原生时代 .NET5 雄霸天下</a></li>
						<li><span>3</span><a href="#">个网络应用安全实操要点，全方位保护 Web 应用的安全</a></li>
						<li><span>4</span><a href="#">啥是全栈程序员？更厉害？更有钱途？</a></li>
						<li><span>5</span><a href="#">我不服！这开源项目居然才888个星！？</a></li>
						<li><span>6</span><a href="#">.NET平台系列18 .NET5的超强优势</a></li>
					</ul>
				</div>
				<!-- <div>
					<h3><a href="#">10天推荐排行</a></h3>
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div> -->
				
			</div>
		</div>
		<footer>

		</footer>


	</body>
</html>
